<template>
  <view>
    <view style="display: flex; justify-content: flex-end">
      <image
        style="width: 40rpx; height: 40rpx; margin-right: 40rpx"
        @click="rightClick"
        src="/static/message/pyq.png"
        mode=""
      ></image>
    </view>
    <view class="msg-tit">
      {{ msg.title }}
    </view>
    <view class="msg-time">
      <text style="position: absolute; left: 40rpx">{{ msg.author }}</text>
      <text style="position: absolute; right: 40rpx">{{ msg.createTime }}</text>
    </view>
    <view v-html="htmlContent" class="rich-text"></view>
    <!-- <rich-text :nodes="htmlContent" class="rich-text"></rich-text> -->
    <view class="comment">
      <view style="display: flex; justify-content: space-between">
        <text>评论留言</text>
        <text style="color: #00aaff" @click="openComment('0', '')"
          >留下评论</text
        >
      </view>
      <view class="" v-for="item in commentList" :key="item.uid">
        <view class="comment-list">
          <img
            :src="urlConfig + '/backstage' + item.criticsImg"
            class="comment-img"
            alt=""
          />
          <view class="comment-item">
            <view style="display: flex; justify-content: space-between">
              <text>{{ item.criticsNickname }}</text>
              <text
                style="color: #00aaff"
                @click="openComment(item.uid, item.criticsNickname)"
                >回复</text
              >
            </view>
            <view style="margin-top: 20rpx">
              {{ item.criticsContent }}
            </view>
            <view style="margin-top: 20rpx; color: #999">
              {{ item.createTime }}
            </view>
          </view>
        </view>
        <view class="erji-list" v-for="ele in item.childs" :key="ele.uid">
          <img
            :src="urlConfig + '/backstage' + ele.criticsImg"
            class="comment-img"
            alt=""
          />
          <view class="erji-item">
            <view style="display: flex; justify-content: space-between">
              <text>{{ ele.criticsNickname }}@{{ ele.recover }}</text>
              <text
                style="color: #00aaff"
                @click="openComment(item.uid, ele.criticsNickname)"
                >回复</text
              >
            </view>
            <view style="margin-top: 20rpx">
              {{ ele.criticsContent }}
            </view>
            <view style="margin-top: 20rpx; color: #999">
              {{ ele.createTime }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup :show="show" mode="bottom">
      <view style="margin: 60rpx 20rpx; padding-bottom: 40rpx">
        <u--textarea
          v-model="criticsContent"
          placeholder="请输入内容"
          count
        ></u--textarea>
        <u-button
          @click="addComment"
          style="margin: 60rpx 255rpx; width: 200rpx"
          type="primary"
          text="发表评论"
        ></u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  getMsgItem,
  addComment,
  getComment
} from '../../api/index.js'
import urlConfig from "../../request/urlConfig.js";
export default {
  data() {
    return {
      msg: {},
      htmlContent: '',
      urlConfig: '',
      pageInfo: {},
      commentList: [],
      show: false,
      criticsContent: ''
    }
  },
  onLoad(e) {
    this.urlConfig = urlConfig.baseURL
    let uid = e.uid
    this.getDetails(uid)
  },
  onShow() {
    this.pageInfo = {
      userId: uni.getStorageSync('userId'),
      nickName: uni.getStorageSync('nickName'),
      headImage: uni.getStorageSync('headImage')
    }
  },
  methods: {
    getDetails(uid) {
      const param = {
        uid: uid
      }
      getMsgItem(param).then(res => {
        if (res.code == 200) {
          this.msg = res.data
          let htmlContent = this.msg.content.split('style="width: 100%;"')
          this.htmlContent = htmlContent.join('style="display: block;width: 100%;"')
          this.getComment()
        }
      })
    },
    rightClick() {
      let imgUrl = this.urlConfig + '/backstage' + this.msg.cover
      console.log(imgUrl, 11111111)
      uni.share({
        provider: "weixin",
        scene: "WXSceneTimeline",
        type: 0,
        href: `https://app.youtuyiliao.com/message/index.html?uid=${this.msg.uid}`,
        title: this.msg.title,
        imageUrl: this.urlConfig + '/backstage' + this.msg.cover,
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    },
    getComment() {
      const param = {
        mediaNewsUid: this.msg.uid
      }
      getComment(param).then(res => {
        if (res.code == 200) {
          this.commentList = res.data
        }
      })
    },
    openComment(puid, name) {
      this.criticsContent = ''
      this.pageInfo.puid = puid
      if (name !== '') {
        this.pageInfo.recover = name
      }
      this.show = true
    },
    addComment() {
      const param = {
        criticsContent: this.criticsContent,
        puid: this.pageInfo.puid,
        criticsNickname: this.pageInfo.nickName,
        criticsImg: this.pageInfo.headImage,
        criticsUid: this.pageInfo.userId,
        mediaNewsUid: this.msg.uid
      }
      if (this.pageInfo.recover !== '') {
        param.recover = this.pageInfo.recover
      }
      addComment(param).then(res => {
        if (res.code == 200) {
          this.show = false
          this.getComment()
        }
      })
    }
  }
}
</script>

<style>
.msg-tit {
  padding: 40rpx;
  width: 750rpx;
  font-size: 40rpx;
  font-weight: 700;
}

.msg-time {
  position: relative;
  color: #666;
  margin: 30rpx 0;
}

.rich-text {
  width: 670rpx;
  margin: 100rpx 40rpx 50rpx 40rpx;
}

::v-deep p {
  line-height: 30px;
  margin: 20px 0;
}

::v-deep span {
  line-height: 30px;
  margin: 20px 0;
}

img {
  width: 100%;
  display: block;
  margin: auto;
}

video {
  width: 100%;
  display: block;
  margin: auto;
}

.comment {
  margin: 20rpx 20rpx 60rpx 20rpx;
  padding-top: 40rpx;
  border-top: 1px solid #eee;
}

.comment-list {
  display: flex;
  gap: 20rpx;
  margin: 60rpx 0;
}

.erji-list {
  padding-left: 80rpx;
  display: flex;
  gap: 20rpx;
  margin: 60rpx 0;
}

.comment-img {
  margin-top: 0;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}

.comment-item {
  width: 600rpx;
}

.erji-item {
  width: 520rpx;
}
</style>